<template>
	<view class="orders">
		<custom-nav-bar showBack title="全部订单"></custom-nav-bar>
		<view class="order-list">
			<view class="order" v-for="(item, index) of data.records" :key="item.id">
				<order-item :item="item" @click="handleOrderDetail(index)"></order-item>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import catchRandom from '../../utils/catchRandom';
import { useFoodList } from '../../stores/foodList';




const random = ref(catchRandom(1, 30))
console.log(random.value);
const data =
{
	total: random.value,
	records: Array.from({ length: random.value }, (e, i) => {

		return {
			id: `abcdefg${i}`,
			number: `123456${i}`,

			// 0：待付款，1，待接单，2：已结单，3：已完成，4：已取消
			status: i % 5,
			userId: `abc`,
			orderTime: `2025-3-${random.value - i} 20:00`,

			// 0：未付款，1：已付款
			payStatus: !(i % 5) ? 0 : 1,
			amount: (i % 2) * 33 + (i % 3 + 1) * 66,
			phone: `10086${i}`,
			address: `12栋`,
			packAmount: `5`,
			orderDetailList: Array.from({ length: catchRandom(1, 8) }, (ele, j) => {

				return {
					id: `ssbb${i}${j}`,
					name: (i * j) % 2 ? '混沌炒饺子' : '饺子炒混沌',
					orderId: `aaaaaaaaaa${i}${j}`,
					dishId: `0000000${i}${j}`,
					dishFlavor: (i * j) % 2 ? '变态辣' : '非常甜',
					number: (i * j) % 2 + 1,
					amount: (i % 2) * 33 + (j % 3) * 66,
					image: `/static/images/food${(j * i) % 2 + 1}.jpg`
				}
			})
		}
	})
}


// 跳转到订单详情页
const handleOrderDetail = (i) => {
	const arr = data.records[i].orderDetailList.map(e => {
		return ({
			nextId: `hsjkdjiw8skjw`,
			name: e.name,
			orderId: e.orderId,
			id: e.dishId,
			desc: e.dishFlavor,
			num: e.number,
			amount: e.amount,
			img: e.image
		})
	})

	// 将数据通过usefoodList传递给orderDetail.vue
	useFoodList().setFoodList(arr);

	console.log(useFoodList().foodList);
	// console.log(arr);
	uni.navigateTo({ url: `/pages/orderDetail/orderDetail` })
}



</script>
<style scoped lang="scss">
.orders {
	min-height: 100vh;
	background-color: #f2f2f2;
	padding: 30rpx;
	box-sizing: border-box;

	.order-list {
		display: flex;
		flex-direction: column;
		gap: 30rpx;
	}
}
</style>
<style></style>
